import React from 'react';
import ReactDOM from 'react-dom';
import {Picker, List} from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            
        };
    }

    componentDidMount() {
        
    }

    onChange = (value) => {
        const {data} = this.props;
        const obj = {[`${this.props.name}`]: value[0] == undefined ? data[0].value : value[0]}
        this.props.callback && this.props.callback(obj,this.props.index);
    }

    render() {
        const {data, label, name, value, language,disabled=false} = this.props;
        let msg = language == 'English' ? 'Please Select' : window.LangMessage.please_select || `請選擇`;
        let Ok = language == 'English' ? 'OK' : window.LangMessage.ok_text || '确认';
        let Cancel = language == 'English' ? 'Cancel' :window.LangMessage.cancel || "取消";
        return (
            <div className="line">
                <Picker 
                    disabled={disabled}
                    extra={msg}
                    data={data}
                    cols={1}
                    value={[value]}
                    onChange={this.onChange}
                    locale={language == 'English'?enUs:''}
                    okText={Ok}
                    dismissText={Cancel}
                >
                    <List.Item arrow="horizontal">{label}</List.Item>
                </Picker>
            </div>
        )
    }
}

export default App;